<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录页</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <style>
        /** {margin: 0; padding: 0;}*/
        #formgroup .title {width: 100%; text-align: center; margin-bottom: 8px;}
        #formgroup .item {padding: 3px }
        #formgroup .item input {height: 30px;width: 100%; border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid #aaa}
        #formgroup .item button {border:1px solid #ccc; border-radius: 2px; background-color: #fff; font-size: 14px; color: #333; padding: 5px 10px 5px 10px}
        #formgroup .item .register {font-size: 12px; text-decoration: none; margin-left: 30px}

        #tips {margin-top: 20px; padding: 5px; text-align: center; overflow: hidden; background-color: #eee; font-size: 12px; display:none;}

        .flex-col-center {display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
        .flex-row-center {display: -webkit-flex; display: flex; flex-direction: row; justify-content: center; align-items: center; }

        .height-r100 {height: 100%}
        .margin-8 {margin: 8px}
        .margin-y8 {margin: 8px 0 8px 0}

        .shadow {
            box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
            -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
        }

    </style>

</head>
<body>
<div class="flex-col-center height-r100 ">
    <div id="formgroup">
        <h4 class="title">请登录</h4>
        <input type="hidden" name="from" value="<?php $from ?>">
        <div class="item">
            <div class="margin-y8 font-12">用户名</div>
            <input type="text" name="username" id="username">
            <h6></h6>
        </div>
        <div class="item">
            <div class="margin-y8 font-12">密码</div>
            <input type="password" name="password" id="password">
            <h6></h6>
        </div>
        <div class="item flex-row-center">
            <button class="shadow" onclick="login_submit()">登 录</button>
            <a class="register" href="/user_register">注册</a>
        </div>
    </div>
    <div id="tips" class="flex-row-center shadow">
        <div id="tips-msg">xxxxxxx</div>
    </div>
</div>

<script src="/lib/jquery.min.js"></script>
<script>
   function login_submit() {
       let uname = $('#username').val();
       let pswd = $('#password').val();
       let url = '/user_login?from=<?= $from ?>';
       $.ajax(
           {
               type: 'post',
               url: url,
               data: {username: uname, password:pswd},
               dataType: 'json',
               async:false,
               success: function(data) {

                   $('#tips-msg').html(data.msg);
                   $('#tips').show();

                   if (data.code === 1) {
                       $('#login_submit').attr("disabled",true);
                       let from = decodeURIComponent(data['data']['from']);
                       if (from.indexOf('user_logout') === -1
                           && from.indexOf('user_login') === -1
                           && from.indexOf('user_register') === -1
                       ) {
                           window.location.href = from;
                       } else {
                           window.location.href = '/';
                       }
                   }
               }
           }
       );
   }
</script>
</body>
</html>
